<template>
  <el-dialog
    :title="title"
    width="70%"
    :visible.sync="showModal"
    @close="closeDialog">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="auto">
      <el-row
        :gutter="20"
        style="flex-wrap: wrap"
        type="flex">
        <el-col :span="8">
          <el-form-item
            label="归档标记"
            prop="archiveFlag">
            <template v-if="pageType=='view'">
              {{ form.archiveFlag? '是' : '否' }}
            </template>
            <el-select
              v-else
              v-model.trim="form.archiveFlag"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="item in flags"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="用户/供应商代码"
            prop="userNum">
            {{ form.userNum }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="账号"
            prop="accountNum">
            <template v-if="pageType=='view'">
              {{ form.accountNum }}
            </template>
            <el-input
              v-else
              v-model.trim="form.accountNum"
              maxlength="2" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="帐号序码"
            prop="accountSeqNum">
            <template v-if="pageType=='view'">
              {{ form.accountSeqNum }}
            </template>
            <el-input
              v-else
              v-model.trim="form.accountSeqNum"
              maxlength="6" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="帐号用途"
            prop="accountUsage">
            <template v-if="pageType=='view'">
              {{ form.accountUsage }}
            </template>
            <el-input
              v-else
              v-model.trim="form.accountUsage"
              maxlength="60" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="有效标志"
            prop="activeMark">
            <template v-if="pageType=='view'">
              {{ form.activeMark }}
            </template>
            <el-input
              v-else
              v-model.trim="form.activeMark"
              maxlength="60"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="银行及分支机构名称"
            prop="bankBranchName">
            <template v-if="pageType=='view'">
              {{ form.bankBranchName }}
            </template>
            <el-input
              v-else
              v-model.trim="form.bankBranchName"
              maxlength="6"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="银行代码"
            prop="bankName">
            <template v-if="pageType=='view'">
              {{ form.bankName }}
            </template>
            <el-input
              v-else
              v-model.trim="form.bankName"
              maxlength="20" />
          </el-form-item>
        </el-col>
        <el-col
          v-if="pageType=='view'"
          :span="8">
          <el-form-item
            label="最后更新人工号"
            prop="lastUpdateId">
            {{ form.lastUpdateId }}
          </el-form-item>
        </el-col>
        <el-col
          v-if="pageType=='view'"
          :span="8">
          <el-form-item
            label="最后更新人姓名"
            prop="lastUpdatePerson">
            {{ form.lastUpdatePerson }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span
      v-if="pageType!='view'"
      slot="footer"
      class="dialog-footer">
      <el-button @click="showModal = false">关 闭</el-button>
      <el-button
        data-oauthUuid="1620462615000"
        type="primary"
        @click="add">提 交</el-button>
    </span>
  </el-dialog>
</template>
  <script>
  import { deepClone } from '@/utils/index'
  export default {
    props: {
      userNum: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        pageType: null, // 页面类型 编辑 还是新增
        title: null,
        showModal: false,
        flags: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        form: {
          'accountNum': null,
          'accountSeqNum': null,
          'accountUsage': null,
          'activeMark': null,
          'archiveFlag': null,
          'bankBranchName': null,
          'bankName': null,
          'id': null,
          'lastUpdateId': null,
          'lastUpdatePerson': null,
          'lastUpdateTime': null,
          'userNum': null,
        },
        rules: {
          archiveFlag: [
            { required: true, message: '请输入', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      closeDialog() {
        this.showModal = false
      },
      show(parms) {
        this.showModal = true
        this.pageType = parms.type
        this.$nextTick(() => {
          this.title = parms.title
          this.init()
          if (parms.type != 'add') {
            // 填充数据
            this.fillData(parms.data)
          }
        })
      },
      add() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.regroupFormData()
          }
        })
      },
      // 组合数据
      regroupFormData() {
        const data = deepClone(this.form)
        this.$emit('appendData', data)
      },
      fillData(data) {
        this.form = data
      },
      init() {
        this.options = []
        this.form = {
          'activeMark': null,
          'addressSeqNum': null,
          'addressUsage': null,
          'archiveFlag': null,
          'chineseAddress': null,
          'contact': null,
          'email': null,
          'englishAddress': null,
          'faxNum': null,
          'id': null,
          'lastUpdateId': null,
          'lastUpdatePerson': null,
          'lastUpdateTime': null,
          'mobile': null,
          'postCode': null,
          'provinceNum': null,
          'telephoneNum': null,
          'userNum': this.userNum
        }
        this.$refs.form.resetFields()
      }
    }
  }
  </script>
